<template>
    <div id="content">
        <!-- 内容 -->
        <el-row :gutter="10" class="chart_top">
            <el-col :span="24">
                <el-card shadow="always" :style="{width:'100%',height:autoHeight+'px'}">
                    <div style="position: relative;">
                        <el-row class="data_box" style="position:absolute;top:-7px;right:60px;z-index:1999">
                            <el-date-picker
                                v-model="searchBox.searchTime"
                                type="year"
                                placeholder="选择日期"
                                style="width:130px;"
                                @change="searchByDate"
                            >
                            </el-date-picker>
                        </el-row>   
                        <div id="line" :style="{width:'100%',height:autoHeight-10+'px'}" v-loading='loading'></div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card shadow="always" :style="{width:'100%',height:autoHeight+'px'}">
                    <div style="position: relative;">
                        <div id="pie"  :style="{width:'100%',height:autoHeight-10+'px'}"></div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="16">
                <el-card shadow="always" :style="{width:'100%',height:autoHeight+'px'}">
                    <div style="position: relative;">
                        <div id="bar"  :style="{width:'100%',height:autoHeight-10+'px'}"></div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <div id="popover">
            <el-popover
                ref="search"
                width="200"
                trigger="click"
            >
                <h1 style="color: #FFFFFF;background-color: #3ac1c4;margin-bottom:15px;padding:5px 0px 5px 15px; border-radius:3px;">操作人</h1>
                <div style="width:90%;height:40%;border:1px solid gray; margin:0 auto; padding:5px 5px 5px 5px;">
                    <h1>测试内容</h1>
                </div>
            </el-popover>
        </div>
    </div>
</template>
<script>
import echarts from 'echarts';
import planApi from 'plugins/axios/planApi.js';
export default {
    data(){
        return{
            grid:{
                legendData:[],
                line:null,
                pie:null,
                bar:null,
                lineOption:null,
                pieOption:null,
                barOption:null,
                lineYAxis:null,
                lineXAxis:null,
                pieYAxis:null,
                pieXAxis:null,
                barYAxis:null,
                barXAxis:null,
                lineSeriesData:[],
                pieSeriesData:[],
                barSeriesData:[],

            },
            loading:false,
            itemColor:[],
            searchBox:{
                searchTime:new Date(),
                searchMonth:1,
            }
        }
    },
    mounted(){
        let self = this;
        self.$nextTick(() => {
            self.init();
        });
    },
    created(){
        let self = this;
        //self.init();
    },
    watch:{
        $route(){
        }
    },
    computed:{
        autoHeight(){
            return this.$store.state.clientHeight/2-55;
        }
    },
    methods:{
        //初始化
        init(){
            let self = this;
            self.initCache();
      
        },
        //初始化页面缓存信息
        initCache(){
            let self = this;
            self.initLegendData();
        },
        //初始化工序类型集合信息
        initLegendData(){
            let self = this;
            planApi.planTaskGraphProcess().then(res =>{
                self.grid.legendData = res.content;
                self.itemColor=self.gradientColor('#c4403a','#af3ac4',res.content.length)
                self.initLine();
                self.initPie();
                self.initBar();
            });
        },
        //初始化折线统计图
        initLine(){
            let self = this;
            self.queryInitLineData();
        },
        //查询折线统计图数据
        queryInitLineData(){
            let self = this;
            let date = self.searchBox.searchTime.getFullYear();
            self.loading=true;
            planApi.planTaskGraphLineDataByDate(date).then(res=>{
                self.loading=false;
                 res.content.forEach(item=>{
                    item.type="bar";
                    item.barWidth=40;
                    item.barGap='-100%';
                 })
                self.grid.lineSeriesData =  res.content;
                self.createInitLine();
            },error=>{
                self.loading=false;
            });
        },
        //创建折线统计图
        createInitLine(){
            let self = this;
            let echartsLine = echarts.init(document.getElementById("line"));
            let option = self.setInitLineOption(echartsLine);
        },
        //设置折线统计图option
        setInitLineOption(echartsLine){
            let self = this;
            let colors = ['#5793f3', '#d14a61', '#675bba'];

            let option = {
                    title: {
                        text: '工序柱状图'
                    },
                    // color:self.itemColor,
                    tooltip: {
                        backgroundColor: "#F6F6F6",
                        borderWidth: 1,
                        borderColor: "rgba(0,0,0,.3)",
                        triggerOn: "click",
                        confine: true,
                        enterable: true,
                        transitionDuration: 0,
                        textStyle: {
                            color: "#333"
                        },
                        extraCssText: 'box-shadow: 0 0 5px 1px rgba(255, 255, 255, 0.3);',
                        padding: [5, 10],
                        position: function (pos, params, dom, rect, size) {
                            return [pos[0] + 10, pos[1]];
                        },
                        formatter:self.lineTooltipHander,
                    },
                    legend: {
                        data:self.grid.legendData, 
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: [
                            {
                            type: 'category',
                            axisTick: {
                                alignWithLabel: true
                            },
                            data: ["1","2",'3','4','5','6','7','8','9','10','11','12']
                        }
                    ],
                    yAxis: {
                        type: 'value',  
                        axisLabel: {  
                            show: true,  
                            interval: 'auto',  
                            formatter: '{value} %'  
                            },  
                        show: true  
                    },
                    series:self.grid.lineSeriesData
            };
            echartsLine.setOption(option);
        },
        //初始化PIE统计图
        initPie(){
            let self = this;
            self.queryInitPieData();
        },
        //查询Pie统计图数据
        queryInitPieData(){
            let self = this;
            let year = self.searchBox.searchTime.getFullYear();
            let month = self.searchBox.searchMonth;
            planApi.planTaskGraphPieDataByDate(year,month).then(res=>{
                self.grid.pieSeriesData = res.content.pie;
                self.grid.barSeriesData = res.content.his;
                self.createInitPie();
                self.createInitBar();
            });
        },
        //创建Pie统计图
        createInitPie(){
            let self = this;
            let echartsPie = echarts.init(document.getElementById("pie"));
            let option = self.setInitPieOption(echartsPie);
        },
        //设置Pie统计图option
        setInitPieOption(echartsPie){
            let self = this;
            let option = {
                    title: {
                        text: ''
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: self.pieTooltipHander,
                        // formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        data:self.grid.legendData,
                    },
                    series: [
                        {
                            name:'访问来源',
                            type:'pie',
                            selectedMode: 'single',
                            radius: [0, '80%'],

                            label: {
                                normal: {
                                    position: 'inner'
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data:self.grid.pieSeriesData,
                            // [
                            //     {value:[335,123], name:'数车',type:'pie', selected:true},
                            //     {value:[258,123], name:'数钻',type:'pie'},
                            //     {value:[1580,123], name:'热',type:'pie'}
                            // ]
                        },
                        // {
                        //     name:'访问来源',
                        //     type:'pie',
                        //     radius: ['40%', '55%'],
                        //     label: {
                        //         normal: {
                        //             formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                        //             backgroundColor: '#eee',
                        //             borderColor: '#aaa',
                        //             borderWidth: 1,
                        //             borderRadius: 4,
                        //             // shadowBlur:3,
                        //             // shadowOffsetX: 2,
                        //             // shadowOffsetY: 2,
                        //             // shadowColor: '#999',
                        //             // padding: [0, 7],
                        //             rich: {
                        //                 a: {
                        //                     color: '#999',
                        //                     lineHeight: 22,
                        //                     align: 'center'
                        //                 },
                        //                 // abg: {
                        //                 //     backgroundColor: '#333',
                        //                 //     width: '100%',
                        //                 //     align: 'right',
                        //                 //     height: 22,
                        //                 //     borderRadius: [4, 4, 0, 0]
                        //                 // },
                        //                 hr: {
                        //                     borderColor: '#aaa',
                        //                     width: '100%',
                        //                     borderWidth: 0.5,
                        //                     height: 0
                        //                 },
                        //                 b: {
                        //                     fontSize: 16,
                        //                     lineHeight: 33
                        //                 },
                        //                 per: {
                        //                     color: '#eee',
                        //                     backgroundColor: '#334455',
                        //                     padding: [2, 4],
                        //                     borderRadius: 2
                        //                 }
                        //             }
                        //         }
                        //     },
                        //     data:[
                        //         {value:335, name:'直达'},
                        //         {value:310, name:'邮件营销'},
                        //         {value:234, name:'联盟广告'},
                        //         {value:135, name:'视频广告'},
                        //         {value:1048, name:'百度'},
                        //         {value:251, name:'谷歌'},
                        //         {value:147, name:'必应'},
                        //         {value:102, name:'其他'}
                        //     ]
                        // }
                    ]
                };
            echartsPie.setOption(option);
        },
        //初始化Bar统计图
        initBar(){
            let self = this;
            self.queryInitBarData();
        },
        //查询Pie统计图数据
        queryInitBarData(){
            let self = this;
            let year = self.searchBox.searchTime.getFullYear();
            let month = self.searchBox.searchMonth;
            planApi.planTaskGraphPieDataByDate(year,month).then(res=>{
                // self.grid.barSeriesData = res.content.his;
                // self.createInitBar();
            });
        },
        //创建Pie统计图
        createInitBar(){
            let self = this;
            let echartsBar = echarts.init(document.getElementById("bar"));
            let option = self.setInitBarOption(echartsBar);
        },
        //设置Pie统计图option
        setInitBarOption(echartsBar){
            
            let self = this;
            let option = {
                    xAxis: {
                        axisLabel:{interval:0},
                        splitLine: {show: true},
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        data: self.grid.legendData,
                    },
                    // legend:{
                    //     data:self.grid.legendData, 
                    // },
                    tooltip:{
                        trigger: 'item',
                        formatter: self.barTooltipHander,
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [
                        {
                            type: 'bar',  
                            data: self.grid.barSeriesData
                        }
                    ]
                };
            echartsBar.setOption(option);
        },
        //查询条件
        searchByDate(val){
           let self = this;
           self.initLine();
        },
        //折线图(line)鼠标移动浮框展示效果处理函数
        lineTooltipHander(params){
            let self = this;
            if(params!= null && params!= undefined){
                self.searchBox.searchMonth = params.value[0];
                self.initPie();
                // self.initBar();
                let res =''
                    +'工序：'+params.seriesName+'<br/>'
                    +'月份：'+params.value[0]+' 月<br/>'
                    +'价钱：'+params.value[5]+' ¥'+'<br/>'
                    +'工时：'+params.value[2]+' 小时<br/>'
                    +'数量：'+params.value[3]+' 件<br/>'
                return res;
            }
        },
        //饼图(pie)鼠标移动浮框展示展示效果处理函数
        pieTooltipHander(params){
            if(params!= null && params!= undefined){
                let res =''
                    +'工序：'+params.name+'<br/>'
                    +'月份：'+params.value[1]+' 月<br/>'
                    +'价钱：'+params.value[5]+' ¥'+'<br/>'
                    +'工时：'+params.value[2]+' 小时<br/>'
                    +'数量：'+params.value[3]+' 件<br/>'
                return res;
            }
        },
        //柱状图(bar)鼠标移动浮框展示展示效果处理函数
        barTooltipHander(params){
            if(params!= null && params!= undefined){
                let res =''
                    +'工序：'+params.name+'<br/>'
                    +'月份：'+params.value[1]+' 月<br/>'
                    +'价钱：'+params.value[5]+' ¥'+'<br/>'
                    +'工时：'+params.value[2]+' 小时<br/>'
                    +'数量：'+params.value[3]+' 件<br/>'
                return res;              
            }
        },
        /**渐变色算法 */
    gradientColor(startColor,endColor,step){
        let startRGB = this.colorRgb(startColor);//转换为rgb数组模式
        let startR = startRGB[0];
        let startG = startRGB[1];
        let startB = startRGB[2];
        let endRGB = this.colorRgb(endColor);
        let endR = endRGB[0];
        let endG = endRGB[1];
        let endB = endRGB[2];
        let sR = (endR-startR)/step;//总差值
        let sG = (endG-startG)/step;
        let sB = (endB-startB)/step;
        var colorArr = [];
        for(var i=0;i<step;i++){
        //计算每一步的hex值
        var hex = this.colorHex('rgb('+parseInt((sR*i+startR))+','+parseInt((sG*i+startG))+','+parseInt((sB*i+startB))+')');
        colorArr.push(this.colorRGBtoHex(hex));
        }
        return colorArr;
    },
    colorRGBtoHex(color) {
	// console.log(color);
	var rgb = color.split(',');
	var r = parseInt(rgb[0].split('(')[1]);
	var g = parseInt(rgb[1]);
	var b = parseInt(rgb[2].split(')')[0]);
	var hex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).substring(1);
	return hex;
    },
    colorRgb(sColor){
        var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
        var sColor = sColor.toLowerCase();
        if(sColor && reg.test(sColor)){
        if(sColor.length === 4){
            var sColorNew = "#";
            for(var i=1; i<4; i+=1){
            sColorNew += sColor.slice(i,i+1).concat(sColor.slice(i,i+1));
            }
            sColor = sColorNew;
        }
        //处理六位的颜色值
        var sColorChange = [];
        for(var i=1; i<7; i+=2){
            sColorChange.push(parseInt("0x"+sColor.slice(i,i+2)));
        }
        return sColorChange;
        }else{
        return sColor;
        }
    },
    colorHex(rgb){
        var _this = rgb;
        var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
        if(/^(rgb|RGB)/.test(_this)){
        var aColor = _this.replace(/(?:(|)|rgb|RGB)*/g,"").split(",");
        var strHex = "#";
        for(var i=0; i<aColor.length; i++){
            var hex = Number(aColor[i]).toString(16);
            hex = hex<10 ? 0+''+hex :hex;// 保证每个rgb的值为2位
            if(hex === "0"){
            hex += hex;
            }
            strHex += hex;
        }
        if(strHex.length !== 7){
            strHex = _this;
        }
        return strHex;
        }else if(reg.test(_this)){
        var aNum = _this.replace(/#/,"").split("");
        if(aNum.length === 6){
            return _this;
        }else if(aNum.length === 3){
            var numHex = "#";
            for(var i=0; i<aNum.length; i+=1){
            numHex += (aNum[i]+aNum[i]);
            }
            return numHex;
        }
        }else{
        return _this;
        }
    },


    },
}
</script>
<style scoped>

</style>